<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">按钮</button>

<script>
// 箭头函数
// 语法：(参数) =>{函数体}
// 箭头函数通常用于匿名函数的地方

let fn1 = function (){
    console.log( '函数表达式' );
} // 函数表达式
function fn2(){
    console.log( '函数声明' );
} // 函数声明
let fn3 = () =>{
    console.log( '箭头函数' );
} // 箭头函数
// fn1();
// fn2();
// fn3();

// 箭头函数的简写：
// 1.如果只有一个形参，可以省略小括号
let fn4 = (a) =>{
    console.log( a );
}
let fn5 = a =>{
    console.log( a );
}

// 2.如果函数体中只有一条语句，可以省略大括号
let fn6 = () =>{
    console.log( '程序1' );
}
let fn7 = () => console.log( '程序1' );

// 3.如果函数体中只有一条return语句，可以省略大括号和return
let fn8 = () =>{
    return 'hello';
}
let fn9 = () => 'hello';

let fn10 = _ => _;
let fn11 = (_) => {
    return _;
}


// 箭头函数和普通函数的区别：

// 1.箭头函数没有函数声明的形式
// function test(){}// 函数声明
// test() =>{} // 语法错误

// 2.箭头函数内部没有this，使用的是箭头函数外部的this
var name = '张三';
var obj = {
    name: '李四',
    say1: function (){
        console.log( this.name );
    },
    say2: ()=>{
        console.log( this.name );
    }
}
obj.say1();// '李四'
obj.say2();// '张三'

var btn = document.querySelector('.btn');
// btn.onclick = function (){
//     console.log( this );// btn
//     setTimeout(function (){
//         console.log( this );// window
//     },1000);
// }

// btn.onclick = ()=>{
//     console.log( this );// window

//     setTimeout(()=>{
//         console.log( this );// window
//     },1000);
// }

btn.onclick = function (){
    console.log( this );// btn

    setTimeout(()=>{
        console.log( this );// btn
    },1000);
}

// 3.箭头函数内部的this不可以改变指向（因为箭头函数内部没有this）
// var name = '小王';
// var obj1 = {
//     name: '老王'
// }
// setTimeout(()=>{
//     console.log( this.name );// 小王
// })

// setTimeout(()=>{
//     console.log( this.name );
// }.bind(obj1))// 报错


// 4.箭头函数不能作为构造函数
// let Cat = (n)=>{
//     this.name = n;
// }
// let cat1 = new Cat('小白');// 报错

// 5.箭头函数没有prototype属性
// let test = ()=>{
//     console.log( '箭头函数' )
// }
// console.log( test.prototype );// undefined

// 6.箭头函数内部没有arguments对象
// let show = ()=>{
//     console.log( arguments );// 报错
// }
// show(1,2,3);



</script>
</body>
</html>